<template>
  <div class="box">
    <!--    选择角色-->
    <div class="box_left">
      <el-button style="margin-bottom: 12px" type="primary" @click="onaddRole('新增')">新增</el-button>
      <addRole v-if="addRoleList.visble" :datas="addRoleList" @back="addRoleList.visble=false"></addRole>
      <div class="box_left_con">
        <div
          @click="onRole(item)"
          @mouseenter="handleMouseEnter(index)"
             @mouseleave="handleMouseLeave(index)"
             v-for="item,index in positionList" :key="item.id" class="box_left_con_list"
             :class="isShow==index?'box_left_con_lists':''"
        >
          <div class="box_left_con_list_left">{{ item.name }}</div>
          <div class="box_left_con_list_right" v-if="isShow==index">
            <span style="margin-right: 24px" @click="onaddRole('编辑')">编辑</span>
            <span style="margin-right: 20px">复制</span>
            <span style="margin-right: 8px;color: #FF0000">删除</span>
          </div>
        </div>
      </div>
    </div>
<!--    右侧列表-->
    <div class="box_right">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="菜单权限"  name="first">
         <div style="display: flex;justify-content: space-between;align-items: center">
           <el-radio-group v-model="tabPosition" @change="elradio"  style="margin-bottom: 14px">
             <el-radio-button  value="1">知产</el-radio-button>
             <el-radio-button  value="2">推广</el-radio-button>
             <el-radio-button  value="3">财务</el-radio-button>
           </el-radio-group>
           <div>
             <el-button style="margin-right: 10px">清空</el-button>
             <el-button type="primary" @click="getCheckedNodes">保存</el-button>
           </div>
         </div>
          <el-tree
            :data="treeData"
            show-checkbox
            node-key="id"
            ref="treeRef"
            :props="defaultProps"
          />
          <el-button @click="setCheckedKeys">根据 key 回显</el-button>
          <el-button @click="setCheckedNodes">根据节点回显</el-button>
        </el-tab-pane>
        <el-tab-pane label="数据权限" name="second">
          <el-form
            ref="ruleFormRef"
            :label-position="'top'"
            :model="form"
            label-suffix=" :"
            label-width="100px"
          >
            <el-form-item label="权限范围" prop="username">
              <el-select style="width: 270px" v-model="form.region" placeholder="请选择权限范围">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="数据权限" prop="username">
              <el-tree-select
                v-model="value"
                :data="data"
                multiple
                :render-after-expand="false"
                show-checkbox
                check-on-click-node
                style="width: 270px"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="用户列表" name="third">
          <userListModel v-if="activeName=='third'"></userListModel>


        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script lang="tsx" setup>
import {User} from "@/api/interface";
import {useHandleData} from "@/hooks/useHandleData";
import {useAuthButtons} from "@/hooks/useAuthButtons";
import userListModel from "./model/userListModel.vue";
//用户列表


// 数据权限
const form = reactive({
  name: '',
  region:''
})
const value = ref()

const data = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    value: '3',
    label: 'Level one 3',
    children: [
      {
        value: '3-1',
        label: 'Level two 3-1',
        children: [
          {
            value: '3-1-1',
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        value: '3-2',
        label: 'Level two 3-2',
        children: [
          {
            value: '3-2-1',
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]
// 新增角色
import addRole from "./model/addRole.vue";
const addRoleList = ref({
  visble: false,
  forms: {
    title: '',
  }
})
const onaddRole = (title, row)=>{
  addRoleList.value.visble = true
  addRoleList.value.forms.title = title
}

import {deleteUser} from "@/api/modules/user";
import {reactive, ref} from "vue";
// 菜单权限
import type { TabsInstance } from 'element-plus'
const tabPosition = ref<TabsInstance['tabPosition']>('1')
// elradio
const elradio=(e)=>{
  console.log(e,'radio')
}
//tree
const treeData = ref([
  // 你的树形数据
  { id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1' },{ id: 5, label: '3级 1-1' }] },
]);
const treeRef = ref(null);
// 获取所有选中节点的方法
const getCheckedNodes = () => {
  if (treeRef.value) {
    const checkedNodes = treeRef.value?.getCheckedNodes();
    console.log(checkedNodes); // 这里将打印出所有选中的节点
  }
};
const defaultProps = {
  children: 'children',
  label: 'label'
};

// 假设这是你需要回显的 key 数组
const checkedKeys = ref([5]); // 假设你想选中 id 为 1 和 4 的节点

// 根据 key 数组回显
const setCheckedKeys = () => {
  if (treeRef.value) {
    treeRef.value.setCheckedKeys(checkedKeys.value);
  }
};

// 假设这是你需要回显的节点数组（通常从 API 获取后转换而来）
const checkedNodes = ref([{ id: 1, label: '一级 1' }, { id: 4, label: '二级 1-1' }]);
// 注意：实际上你可能不需要整个节点对象，只要 key 足够唯一即可。这里只是为了演示。

// 根据节点数组回显（通常不推荐，因为你需要完整的节点对象）
const setCheckedNodes = () => {
  if (treeRef.value) {
    // 注意：这里为了演示而直接使用了 checkedNodes，但在实际场景中，
    // 你可能需要从 treeData 中找到与 checkedNodes 中 key 相匹配的节点，
    // 因为 Element Plus 的 setCheckedNodes 方法期望的是树中的节点对象，
    // 而不是简单的包含 key 的对象数组。
    //
    // 下面是一个简化的示例，没有实际查找节点，只是演示方法调用。
    // 在实际应用中，你应该先根据 checkedNodes 中的 key 找到对应的节点对象，
    // 然后调用 setCheckedNodes 方法。
    //
    // treeRef.value.setCheckedNodes(经过查找得到的节点对象数组);
    //
    // 由于这里只是示例，我们直接调用（这在实际中可能不会按预期工作）
    treeRef.value.setCheckedNodes(checkedNodes.value); // 这通常不会按预期工作，因为 checkedNodes.value 不是树中的节点对象
  }
};



// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const {BUTTONS} = useAuthButtons();
// 角色列表
const positionList = ref(
  [
    {
      name: '管理员',
      id: 1,
    },
    {
      name: '知产顾问',
      id: 2,
    },
    {
      name: '知产材料员',
      id: 3,
    },
    {
      name: '销售组长',
      id: 4
    },

  ]
)
const isShow = ref(0);
//鼠标移入
const handleMouseEnter=(index)=> {
  isShow.value = index;
  console.log('鼠标移入');
}
//鼠标移出
const handleMouseLeave=(index) => {
  isShow.value = -1;
}

// 角色点击
const onRole =(item) =>{
  console.log(item,'角色数据')
}

// 右侧tabs切换
import type { TabsPaneContext } from 'element-plus'
import ZcSelectMember from "@/components/ZcSelectMember/index.vue";
import ZcSelectRole from "@/components/ZcSelectRole/index.vue";
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

// 删除
const deleteAccount = async (params: User.ResUserList) => {
  await useHandleData(deleteUser, {id: [params.id]}, `删除【${params.username}】用户`);

};


</script>
<style lang="scss" scoped>
:deep(.el-radio-button__inner) {
  width: 96px;
}
:deep(.el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner){
  background: #fff;
  color: #3370FF;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
:deep(.el-tree-node:focus > .el-tree-node__content) {
  background-color: rgba(31, 97, 243, 0.10);
  color: rgba(51, 112, 255, 1);
}


.box {
  display: flex;
  width: 100%;

  .box_left {
    padding: 12px;
    margin-right: 12px;
    width: 296px;
    height: 798px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    position: relative;

    .box_left_con {
      .box_left_con_list {
        padding-left: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 276px;
        height: 38px;
        margin-bottom: 8px;

        .box_left_con_list_left {
          font-weight: 400;
          font-size: 14px;
          color: #303133;

        }

        .box_left_con_list_right {
          font-size: 12px;
          color: #3370FF;

        }
      }

      .box_left_con_lists {
        height: 40px;
        background: rgba(31, 97, 243, 0.1);
        margin-bottom: 8px;
      }
    }

  }

  .box_right {
    padding: 12px;
    min-width: 600px;
    flex: 1;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
  }
}
</style>
